<template>
	<div class="page">
		<Notice></Notice>
		<u-navbar back-text="返回" title="用量详情"></u-navbar>
		<z-paging ref="paging" :fixed="false" class="container" refresher-only @onRefresh="refresh">
			<div class="title flex">
				<span class="text">今日用量统计</span>
				<span class="time">更新于：{{$u.timeFormat(now, "yyyy-mm-dd hh:MM")}}</span>
			</div>
			<div class="card">
				<div class="dosage flex">
					<div class="left flex">
						<div class="monitor"></div>
						<div>
							<div class="row row-a flex">
								<span class="text-1">监测用量</span>
								<span class="text-2">{{usage.subject_limit}}条</span>
							</div>
							<div class="row row-b flex">
								<span class="text-3">已用</span>
								<span class="text-4 color-1 mr-20">{{usage.subject_used}}</span>
								<span class="text-3">剩余</span>
								<span class="text-4">{{usage.subject_limit - usage.subject_used}}</span>
							</div>
						</div>
					</div>
					<u-circle-progress active-color="#1E62FC" duration="200" :percent="usage.subject_percent" width="140">
						<div class="u-progress-content">
							<text class="u-progress-info">{{usage.subject_percent}}%</text>
						</div>
					</u-circle-progress>
				</div>
				<div class="count-box">
					<div class="text-1">监测关键词</div>
					<div class="count-con flex">
						<div class="des">
							<div class="text-4">{{usage.words_limit}}</div>
							<div class="text-3">关键词总量</div>
						</div>
						<div class="des">
							<div class="text-4 color-1">{{usage.words_used}}</div>
							<div class="text-3">已用</div>
						</div>
						<div class="des">
							<div class="text-4">{{usage.words_limit - usage.words_used}}</div>
							<div class="text-3">剩余</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="dosage flex">
					<div class="left flex">
						<div class="warn"></div>
						<div>
							<div class="row row-a flex">
								<span class="text-1">监测用量</span>
								<span class="text-2">{{usage.warn_limit}}条</span>
							</div>
							<div class="row row-b flex">
								<span class="text-3">已用</span>
								<span class="text-4 color-2 mr-20">{{usage.warn_used}}</span>
								<span class="text-3">剩余</span>
								<span class="text-4">{{usage.warn_limit - usage.warn_used}}</span>
							</div>
						</div>
					</div>
					<u-circle-progress active-color="#E65441" duration="200" :percent="usage.warn_percent" width="140">
						<div class="u-progress-content">
							<text class="u-progress-info">{{usage.warn_percent}}%</text>
						</div>
					</u-circle-progress>
				</div>
			</div>
			<div class="title flex">
				<span class="text">专题用量详情</span>
			</div>
			<div class="list">
				<div class="card item" v-for="(item,index) in list" :key="index">
					<div class="name">{{item.title}}</div>
					<div class="des flex">
						<div class="left flex">
							<span class="text-3">今日</span>
							<span class="text-4 color-1">{{item.today}}</span>
							<span class="text-3">昨日</span>
							<span class="text-4">{{item.yesterday}}</span>
						</div>
						<u-icon class="right" name="pause-circle" size="42" color="#1E62FC" v-if="item.status=='r'" @click="subjectHandle(item)"></u-icon>
						<u-icon class="right" name="play-circle" size="42" color="#1E62FC" v-if="item.status=='p'" @click="subjectHandle(item)"></u-icon>
					</div>
				</div>
			</div>
		</z-paging>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { userStatistics, usageStatistics } from "@/api/user";
import { subjectCateOperate } from "@/api/subject";

export default {
	data() {
		return {
			now: new Date().getTime(),
			usage: {
				subject_limit: 0,
				subject_used: 0,
				warn_limit: 0,
				warn_used: 0,
				words_limit: 0,
				words_used: 0
			},
			params: {
				page: 1,
				limit: 100,
			},
			list: [],
			meta: {},
		};
	},
	mounted() {
		this.refresh(); 
	},
	methods: {
		refresh() {
			this.getUserStatistics();
			this.getList();
		},
		getUserStatistics() {
			userStatistics().then(({code, data})=>{
				if(code == 200){
					this.usage = data;
					this.usage.subject_percent = ((data.subject_used/data.subject_limit)*100).toFixed(2)/1;
					this.usage.warn_percent = ((data.warn_used/data.warn_limit)*100).toFixed(2)/1;
				}
			});
		},
		getList() {
			usageStatistics(this.params).then(({code, data})=>{
				this.$refs.paging.endRefresh();
				if(code == 200){
					this.list = data.list;
					this.meta = data.meta;
				}
			})
		},
		subjectHandle(row) {
			uni.showLoading();
			let params = {
				id: row.id,
				status: row.status == "r" ? "p" : "r"
			}
			subjectCateOperate(params).then(({ code }) => {
				uni.hideLoading();
				if (code == 200) {
					row.status = params.status;
					this.$refs.uToast.show({
						title: params.status == "r" ? "更新已开启" : "更新已暂停",
						type: "success",
					});
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.page{
	height: 100%;
	display: flex;
	flex-direction: column;
}
.title{
	width: 690rpx;
	margin: auto;
	padding-top: 30rpx;
	justify-content: space-between;
	align-items: flex-end;
	.text{
		font-weight: bold;
		font-size: 36rpx;
	}
	.time{
		font-size: 24rpx;
	}
}
.container{
	flex-grow: 1;
}
.card{
	background-color: #fff;
	width: 690rpx;
	margin: auto;
	margin-top: 30rpx;
	padding: 30rpx 20rpx;
	border: 1rpx solid #eee;
	border-radius: 10rpx;
	box-sizing: border-box;
	.dosage{
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.monitor{
		width: 100rpx;
		height: 100rpx;
		background: #EDF3FD url(./../../static/monitor.png) no-repeat center/50rpx 50rpx;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}
	.warn{
		width: 100rpx;
		height: 100rpx;
		background: #FCEDEC url(./../../static/warn.png) no-repeat center/50rpx 50rpx;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}
	.color-1{
		color: #1E62FC;
	}
	.color-2{
		color: #E65441;
	}
	.text-1{
		font-size: 36rpx;
		margin-right: 10rpx;
		line-height: 36rpx;
	}
	.text-2{
		font-size: 30rpx;
		color: #666;
		line-height: 36rpx;
	}
	.text-3{
		font-size: 26rpx;
		line-height: 32rpx;
		color: #999;
		margin-right: 10rpx;
	}
	.text-4{
		font-size: 30rpx;
		line-height: 32rpx;
		font-weight: bold;
	}
	.row-a{
		margin-top: 8rpx;
	}
	.row-b{
		margin-top: 20rpx;
	}
	.mr-20{
		margin-right: 20rpx;
	}
	.count-box{
		.count-con{
			margin-top: 30rpx;
			justify-content: space-between;
		}
		.des{
			text-align: center;
		}
		.text-4{
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
	}
}
.list{
	padding-bottom: 50rpx;
	.name{
		font-size: 36rpx;
		line-height: 36rpx;
		font-weight: bold;
	}
	.des{
		margin-top: 30rpx;
		justify-content: space-between;
		align-items: center;
	}
	.color-1{
		margin-right: 20rpx;
	}
}
</style>
